<template>
  <el-dialog
    v-model="dialogVisible"
    title="责任详情"
    width="800px"
    :before-close="handleClose"
  >
    <div class="detail-container" v-if="responsibilityData">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>责任名称：</label>
              <span>{{ responsibilityData.name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>责任编号：</label>
              <span>{{ responsibilityData.code }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>责任类型：</label>
              <el-tag :type="getResponsibilityTypeTag(responsibilityData.type)">
                {{ getResponsibilityTypeText(responsibilityData.type) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>责任级别：</label>
              <el-tag :type="getLevelTag(responsibilityData.level)">
                {{ getLevelText(responsibilityData.level) }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>归属部门：</label>
              <span>{{ responsibilityData.department }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>状态：</label>
              <el-tag :type="getStatusTag(responsibilityData.status)">
                {{ getStatusText(responsibilityData.status) }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        
        <div class="detail-item">
          <label>责任描述：</label>
          <p class="description">{{ responsibilityData.description }}</p>
        </div>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>分配人数：</label>
              <span class="highlight">{{ responsibilityData.assignedCount }}人</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>创建时间：</label>
              <span>{{ responsibilityData.createTime }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <!-- 分配人员 -->
      <div class="detail-section">
        <h3 class="section-title">分配人员</h3>
        <el-table :data="assignedPersonnel" border>
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="employeeId" label="工号" width="120" />
          <el-table-column prop="department" label="部门" width="120" />
          <el-table-column prop="position" label="职位" width="120" />
          <el-table-column prop="phone" label="联系电话" width="130" />
          <el-table-column prop="assignDate" label="分配时间" width="160" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'active' ? 'success' : 'warning'">
                {{ row.status === 'active' ? '在岗' : '离岗' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 执行记录 -->
      <div class="detail-section">
        <h3 class="section-title">执行记录</h3>
        <el-timeline>
          <el-timeline-item
            v-for="record in executionRecords"
            :key="record.id"
            :timestamp="record.time"
            placement="top"
          >
            <el-card>
              <h4>{{ record.title }}</h4>
              <p>{{ record.description }}</p>
              <p class="record-meta">执行人：{{ record.executor }} | 状态：
                <el-tag :type="record.status === 'completed' ? 'success' : 'warning'" size="small">
                  {{ record.status === 'completed' ? '已完成' : '进行中' }}
                </el-tag>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">编辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  visible: boolean
  responsibilityData?: any
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'edit', data: any): void
}

const props = withDefaults(defineProps<Props>(), {
  responsibilityData: null
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 模拟分配人员数据
const assignedPersonnel = ref([
  {
    id: 1,
    name: '张三',
    employeeId: 'EMP001',
    department: '运行部',
    position: '运行主管',
    phone: '13800138001',
    assignDate: '2024-01-15 10:30:00',
    status: 'active'
  },
  {
    id: 2,
    name: '李四',
    employeeId: 'EMP002',
    department: '运行部',
    position: '运行员',
    phone: '13800138002',
    assignDate: '2024-01-16 14:20:00',
    status: 'active'
  }
])

// 模拟执行记录数据
const executionRecords = ref([
  {
    id: 1,
    title: '日常安全巡检',
    description: '完成水库大坝、溢洪道、输水设施的安全巡检工作',
    executor: '张三',
    status: 'completed',
    time: '2024-01-20 09:00:00'
  },
  {
    id: 2,
    title: '设备运行检查',
    description: '检查闸门、启闭机等设备运行状态',
    executor: '李四',
    status: 'completed',
    time: '2024-01-19 14:30:00'
  },
  {
    id: 3,
    title: '水位监测记录',
    description: '记录水库水位变化情况，上报相关数据',
    executor: '张三',
    status: 'in_progress',
    time: '2024-01-18 08:00:00'
  }
])

const handleClose = () => {
  dialogVisible.value = false
}

const handleEdit = () => {
  emit('edit', props.responsibilityData)
  handleClose()
}

// 工具方法
const getResponsibilityTypeTag = (type: string) => {
  const tagMap: Record<string, string> = {
    safety: 'danger',
    operation: 'primary',
    maintenance: 'warning',
    management: 'success'
  }
  return tagMap[type] || 'info'
}

const getResponsibilityTypeText = (type: string) => {
  const textMap: Record<string, string> = {
    safety: '安全责任',
    operation: '运行责任',
    maintenance: '维护责任',
    management: '管理责任'
  }
  return textMap[type] || type
}

const getLevelTag = (level: string) => {
  const tagMap: Record<string, string> = {
    '1': 'danger',
    '2': 'warning',
    '3': 'info'
  }
  return tagMap[level] || 'info'
}

const getLevelText = (level: string) => {
  const textMap: Record<string, string> = {
    '1': '一级',
    '2': '二级',
    '3': '三级'
  }
  return textMap[level] || level
}

const getStatusTag = (status: string) => {
  const tagMap: Record<string, string> = {
    active: 'success',
    suspended: 'warning',
    abolished: 'danger'
  }
  return tagMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '有效',
    suspended: '暂停',
    abolished: '废止'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.detail-container {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 30px;
}

.section-title {
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.detail-item label {
  min-width: 100px;
  color: #606266;
  font-weight: 500;
  margin-right: 10px;
}

.detail-item span {
  color: #303133;
}

.description {
  margin: 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #303133;
  line-height: 1.6;
  flex: 1;
}

.highlight {
  color: #409eff;
  font-weight: 600;
}

.record-meta {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: #909399;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 20px;
}

:deep(.el-card) {
  border: 1px solid #e4e7ed;
}

:deep(.el-card h4) {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

:deep(.el-card p) {
  margin: 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
}
</style>